<!DOCTYPE html>
<html lang="en">
  <head>
    <title>midime</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, viewport-fit=cover">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/@magenta/music@1.9.0"></script>
    <script src="https://cdn.jsdelivr.net/npm/d3@5.7.0/dist/d3.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,700&display=optional" rel="stylesheet">
    <link rel="icon" href="https://magenta.tensorflow.org/favicon.ico">
  </head>
  <body>
    <div class="full green" id="splashScreen">
      <div class="content small">
        <section>
          <h1>midi<b>me</b></h1>
        </section>

        <section>


          <div class="horizontal">
            <button id="btnGoMelodies" class="button">🎹 melodies</button>
            <button id="btnGoTrios" class="button">🎹🎸🥁 trios</button>
          </div>
        </section>


      </div>
    </div>

    <div class="full" id="mainScreen" hidden>
      <div class="content">
        <h1><span id="modeText">midi</span><b>me</b></h1>



        <section id="section_2" hidden>
          <div class="index">2</div>
          <h2>Choose your sound</h2>

          <p>
            We are now going to <b>train a small model</b> (right here in your browser!!!), based on MusicVAE, that will try to make sure all the
            sampled variations will sound like some music you give it. You can
            <label class="button" id="fileBtn">
              load a midi file
              <input type="file" id="fileInput" multiple>
            </label>
            <b>or</b>
            <button id="sampleBtn" class="button">
              load our example
            </button>
            if you don't have a MIDI available.
            <div>
              Or, if you have the URL of a file (like from
              <a href="https://bitmidi.com/backstreet-boys-i-want-it-that-way-mid">BitMidi</a>) you can
              use that too:
              <input id="urlInput" type="text" value="https://bitmidi.com/uploads/15119.mid">
              <button id="urlBtn" class="button">
                load from url
              </button>.
            </div>
          </p>
          <b><p id="status" hidden></p></b>

          <div id="input" hidden>
            <p>This is what your file sounds like:</p>
            <div class="relative">
              <button id="btnPlayInput" class="button-circle" aria-label="play">
                <svg class="iconPlay" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
                <svg class="iconStop" hidden xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M6 6h12v12H6z"/></svg>
              </button>
              <div class="visualizer-container cream">
                <svg id="vizInput"></svg>
              </div>
            </div>
          </div>
        </section>

        <section id="section_3" hidden>
          <div class="index">3</div>
          <h2>Personalize the model!</h2>

          <div id="hasMelody" hidden>
            <p>The MIDI file you uploaded had several instruments, so this is what we think the melody is. This is what we will be training on.</p>
            <div class="relative">
              <button id="btnPlayMelody" class="button-circle" aria-label="play">
                <svg class="iconPlay" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
                <svg class="iconStop" hidden xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M6 6h12v12H6z"/></svg>
              </button>
              <div class="visualizer-container cream">
                <svg id="vizMelody"></svg>
              </div>
            </div>
          </div>

          <p id="beforeTraining">We're ready to start training on the MIDI that you uploaded! If you think about MusicVAE as representing the
            space of all possible melodies as a giant sphere, we are now building a smaller sphere
            inside of it, which represents all the melodies that are musically in the same neighbourhood as <b>yours</b>. The more steps you
            train for, the better the results are. <br>
            When you're ready, <button class="button" id="btnTrain">start training!!</button> for <input id="trainingSteps" value="100" type="tel"> steps.
          </p>
          <p id="doneTraining" hidden><b>Training complete!</b><br>
            We've now added 4 new MidiMe sliders to Step 1: these super slliders
            control the features that make the random samples sound like <b>your</b> input. Go slide them around and see
            how the samples change!<br>
          </p>
          <div id="duringTraining" hidden>
            <p>Training step: <b id="trainingStep">0</b> / <span id="totalSteps">100</span></p>
            <p>To check how well we're training the model, we can track its error reconstructing your
              uploaded file. We're not looking for it to become exactly 0 -- just to go down and flatten out. </p>
            <svg id="errorGraph" width="300"></svg>
          </div>
        </section>
        <section id="section_1">
          <div class="index" id="two">1</div>
          <h2>Hear some samples!</h2>

          <p><a href="https://magenta.tensorflow.org/music-vae">MusicVAE</a> is a machine learning model that has previously been trained
            on a lot of MIDI files. It
            represents each music sample as a vector
            of 256 features, and every different vector of 256 numbers sounds like a different piece of music!see how it affects the sample!</p>

          <p id="afterTraining" hidden>🆕🆕🆕 This new model we trained learned to summarize those 256 sliders as 4 <b>super sliders</b>. The super sliders
            control the features that make the random samples sound like your input. When you use them, the sample won't
            randomly change like it does when you use the regular sliders.
          </p>

          <b><p id="loadingStatus">Loading model...</p></b>

          <p>
            You can also <button class="button" id="btnSample" disabled>get another sample</button>
            whenever you want.
          </p>

          <div id="afterLoading" hidden>

            <p>And this is what that sample sounds like:</p>
            <div class="relative">
              <div class="visualizer-container cream">
                <button id="btnPlaySample" class="button-circle" aria-label="play">
                  <svg class="iconPlay" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
                  <svg class="iconStop" hidden xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M6 6h12v12H6z"/></svg>
                </button>
                <svg id="vizSample"></svg>
              </div>
            </div>

            <div class="horizontal">
              <div class="sliders-container blue" id="midimeSlidersContainer" hidden>
                <p>✨<b>super</b> sliders!✨</p>
                <div class="sliders horizontal" id="midimeSliders">
                  <div class="range-wrap"><input type="range" data-index="0" min="-1" max="1" step="0.1" value="0"></div>

                </div>
              </div>

              <div class="sliders-container green">
                <p>use these sliders to change some features of the sample</p>
                <svg id="lines"></svg>
                <div class="sliders horizontal" id="mvaeSliders"></div>
              </div>
            </div>

            <br>
            <button id="saveBtn" class="button">save this sample</button>
            <br>

          </div>
        </section>

      </div>
    </div>
  </body>
  <script src="helpers.js"></script>
  <script src="script.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js" defer></script>
</html>
